<template>
  <div class="container">
    <img src="../../../../assets/image/zljc.png" width="40%" />
    <div id="c-c" style="width: 55%; height: 700px; margin-top: 20px"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts/highstock";
export default {
  created() {
    setTimeout(() => {
      var chart = Highcharts.chart("c-c", {
        chart: {
          type: "line",
          backgroundColor: "#0000",
        },

        title: {
          text: "结构裂纹萌生时间（年）",
          style: {
            color: "#000",
            fontSize: "24px",
          },
        },
        legend: {
          textStyle: {
            color: "black",
          },
        },
        xAxis: {
          labels: {
            style: {
              color: "#000",
              fontSize:'16px'
            },
          },
          categories: [
            "副主梁与端梁连接上盖板（西）",
            "副主梁连接上盖板（西）",
            "主梁端部变截面连接焊缝",
            "北侧主梁下盖板1/4 跨",
            "北侧主梁下盖板1/2 跨",
            "北侧主梁下盖板1/4 跨",
            "副主梁连接上盖板（东)",
            "副主梁与端梁连接上盖板（东）",
            "北侧主梁主腹板1/4 跨（西）",
            "北侧主梁主腹板1/2 跨",
            "北侧主梁主腹板1/4 跨（东）",
          ],
        },
        yAxis: {
          title: {
            text: "时间 (年)",
            style: {
              color: "#000",
              fontSize:'16px'
            },
          },
          labels: {
            style: {
              color: "#000",
              fontSize:'16px'

            },
          },
        },
        plotOptions: {
          line: {
            dataLabels: {
              // 开启数据标签
              enabled: true,
              style: {
                color: "#2099D3",
              },
            },
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            enableMouseTracking: false,
            showInLegend:false,
          },
        },
        series: [
          {
            name: "<b style='color:#2099D3;font-size:16px'>主梁</b>",
            data: [22, 23, 95, 80, 96, 71, 15, 49, 69, 15, 32],
          },
        ],
      });
    }, 0);
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="less" scoped>
div.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
</style>
